.tabbar-container {
    display: flex;
    flex-direction: column;
    margin-top: 3%;
}

.tab-header {
    display: flex;
}

.tab-item {
    margin-right: 20px;
    cursor: pointer;
    transition: color 0.3s;
    display: flex;
    align-items: center;
    font-size: 15px;
    color: #858585;
    font-weight: 600;
}

.tab-item.active {
    color: #000;
    font-size: 20px;
    font-weight: 600;
}

.tab-content {
   display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: auto;
  gap: 15px;
  margin-top: 20px;

}

// 小红书
.image-stack {
    position: relative;
    cursor: pointer;

    .overlay-image {
        position: absolute;
        top: 0;
        left: 0;
        width: 31%;
        border-radius: 7px;
        object-fit: cover;
    }
}


.image-stack1 {
    position: relative;
    width: 31%;
    height: 154.3px;
    background: linear-gradient(85deg, #fff2ec 0%, #ffffff 100%);
    border: 1px solid #ccc;
    left: 32.5%;
    border-radius: 7px;

    .overlay-image1 {
        position: absolute;
        top: 10%;
        left: 5%;
        width: 30%;
        border-radius: 7px;
        object-fit: cover;
        cursor: pointer;
    }

    .div1-image1 {
        width: 1px;
        height: 80px;
        left: 49%;
        top: 34.5%;
        position: absolute;
        object-fit: cover;
        border-right: 1px solid #ccc;
    }

    .overlay-image2 {
        position: absolute;
        top: 33%;
        left: 5%;
        width: 17%;
        border-radius: 7px;
        object-fit: cover;
        cursor: pointer;
    }

    .overlay-image3 {
        position: absolute;
        top: 33%;
        left: 24%;
        width: 17%;
        border-radius: 7px;
        object-fit: cover;
        cursor: pointer;
    }

    .overlay-image4 {
        position: absolute;
        top: 10%;
        left: 56%;
        width: 30%;
        border-radius: 7px;
        object-fit: cover;
        cursor: pointer;
    }

    .overlay-image5 {
        position: absolute;
        top: 33%;
        left: 57%;
        width: 17%;
        border-radius: 7px;
        object-fit: cover;
        cursor: pointer;
    }

    .overlay-image6 {
        position: absolute;
        top: 33%;
        left: 77%;
        width: 17%;
        border-radius: 7px;
        object-fit: cover;
        cursor: pointer;
    }

}



.image-stack2 {
    position: relative;
    width: 13.6%;
    height: 154.3px;
    background: #fff;
    border: 1px solid #ccc;
    left: 65%;
    margin-top: -0%;
    border-radius: 7px;
    cursor: pointer;

    span {
        position: absolute;
        left: 5%;
        top: 5%;
    }

    .overlay-image1 {
        position: absolute;
        width: 70%;
        left: 30%;
        top: 17.7%;
    }
}

.image-stack3 {
    position: relative;
    width: 13.6%;
    height: 154.3px;
    background: #fff;
    border: 1px solid #ccc;
    left: 79.3%;
    margin-top: -11.9%;
    border-radius: 7px;
    cursor: pointer;

    span {
        position: absolute;
        left: 5%;
        top: 5%;
    }

    .overlay-image1 {
        position: absolute;
        width: 70%;
        left: 30%;
        top: 17.7%;
    }
}

.image-stack4 {
    position: relative;
    width: 13.6%;
    height: 154.3px;
    left: 93.6%;
    margin-top: -11.9%;
    cursor: pointer;

    .div1-stack4 {
        width: 100%;
        height: 47%;
        background: #fff;
        border: 1px solid #ccc;
        border-radius: 7px;

        span {
            position: absolute;
            left: 5%;
            top: 5%;
        }

        .overlay-image1 {
            position: absolute;
            width: 41.5%;
            left: 58.7%;

        }
    }

    .div1-stack5 {
        width: 100%;
        height: 47%;
        margin-top: 6%;
        background: #fff;
        border: 1px solid #ccc;
        border-radius: 7px;

        span {
            position: absolute;
            left: 5%;
            top: 57%;
        }

        .overlay-image1 {
            position: absolute;
            width: 41.5%;
            left: 58.7%;
        }
    }
}

// 电商
.online_retailers {
    position: relative;
    width: 14%;
    height: 154.3px;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 7px;
    cursor: pointer;

    .overlay-image {
        position: absolute;
        top: 10%;
        left: 22.5%;
        width: 55%;
        border-radius: 7px;
        object-fit: cover;
    }

    .online-div1 {
        position: absolute;
        top: 86.4%;
        left: 0;
        width: 100%;
        background-color: rgb(245, 245, 245);
        text-align: center;
        border-bottom-left-radius: 7px;
        border-bottom-right-radius: 7px;
        object-fit: cover;
    }
}

.online_retailers1 {
    position: relative;
    width: 14%;
    height: 154.3px;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 7px;
    left: 16.5%;
    margin-top: -12%;
    cursor: pointer;

    .overlay-image {
        position: absolute;
        top: 10%;
        left: 34.5%;
        width: 31%;
        border-radius: 7px;
        object-fit: cover;
    }

    .online-div1 {
        position: absolute;
        top: 86.4%;
        left: 0;
        width: 100%;
        background-color: rgb(245, 245, 245);
        text-align: center;
        border-bottom-left-radius: 7px;
        border-bottom-right-radius: 7px;
        object-fit: cover;
    }
}

.online_retailers2 {
    position: relative;
    width: 14%;
    height: 154.3px;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 7px;
    left: 33%;
    margin-top: -11.9%;
    cursor: pointer;

    .overlay-image {
        position: absolute;
        top: 10%;
        left: 32.5%;
        width: 34.5%;
        border-radius: 7px;
        object-fit: cover;
    }

    .online-div1 {
        position: absolute;
        top: 86.4%;
        left: 0;
        width: 100%;
        background-color: rgb(245, 245, 245);
        text-align: center;
        border-bottom-left-radius: 7px;
        border-bottom-right-radius: 7px;
        border-bottom: 1px solid #ccc;
        object-fit: cover;
    }
}

.online_retailers3 {
    position: relative;
    width: 13.6%;
    height: 154.3px;
    background: #fff;
    border: 1px solid #ccc;
    left: 49.5%;
    margin-top: -11.9%;
    border-radius: 7px;
    cursor: pointer;

    span {
        position: absolute;
        left: 5%;
        top: 5%;
    }

    .overlay-image1 {
        position: absolute;
        width: 70%;
        left: 30%;
        top: 17.7%;
    }
}

.online_retailers4 {
    position: relative;
    width: 13.6%;
    height: 154.3px;
    background: #fff;
    border: 1px solid #ccc;
    left: 65%;
    margin-top: -11.9%;
    border-radius: 7px;
    cursor: pointer;

    span {
        position: absolute;
        left: 5%;
        top: 5%;
    }

    .overlay-image1 {
        position: absolute;
        width: 70%;
        left: 30%;
        top: 17.7%;
    }
}

.online_retailers5 {
    position: relative;
    width: 13.6%;
    height: 154.3px;
    background: #fff;
    border: 1px solid #ccc;
    left: 79.3%;
    margin-top: -11.9%;
    border-radius: 7px;
    cursor: pointer;

    span {
        position: absolute;
        left: 5%;
        top: 5%;
    }

    .overlay-image1 {
        position: absolute;
        width: 70%;
        left: 30%;
        top: 17.7%;
    }
}

.online_retailers6 {
    position: relative;
    width: 13.6%;
    height: 154.3px;
    left: 93.6%;
    margin-top: -11.9%;
    cursor: pointer;

    .div1-stack4 {
        width: 100%;
        height: 47%;
        background: #fff;
        border: 1px solid #ccc;
        border-radius: 7px;

        span {
            position: absolute;
            left: 5%;
            top: 5%;
        }

        .overlay-image1 {
            position: absolute;
            width: 41.5%;
            left: 58.7%;

        }
    }

    .div1-stack5 {
        width: 100%;
        height: 47%;
        margin-top: 6%;
        background: #fff;
        border: 1px solid #ccc;
        border-radius: 7px;

        span {
            position: absolute;
            left: 22%;
            top: 71%;
        }
    }
}

// 公众号
.official_account {
    position: relative;
    width: 14%;
    height: 154.3px;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 7px;
    cursor: pointer;

    .overlay-image {
        position: absolute;
        top: 23%;
        left: 7.5%;
        width: 85%;
        border-radius: 7px;
        object-fit: cover;
    }

    .online-div1 {
        position: absolute;
        top: 86.4%;
        left: 0;
        width: 100%;
        background-color: rgb(245, 245, 245);
        text-align: center;
        border-bottom-left-radius: 7px;
        border-bottom-right-radius: 7px;
        object-fit: cover;
    }
}

.official_account2 {
    position: relative;
    width: 14%;
    height: 154.3px;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 7px;
    left: 33%;
    margin-top: -11.9%;
    cursor: pointer;

    .overlay-image {
        position: absolute;
        top: 10%;
        left: 22.5%;
        width: 55%;
        border-radius: 7px;
        object-fit: cover;
    }

    .online-div1 {
        position: absolute;
        top: 86.4%;
        left: 0;
        width: 100%;
        background-color: rgb(245, 245, 245);
        text-align: center;
        border-bottom-left-radius: 7px;
        border-bottom-right-radius: 7px;
        border-bottom: 1px solid #ccc;
        object-fit: cover;
    }
}

// 教育培训
.Education {
    position: relative;
    width: 14%;
    height: 154.3px;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 7px;
    cursor: pointer;

    .overlay-image {
        position: absolute;
        top: 10%;
        left: 34.5%;
        width: 32%;
        border-radius: 7px;
        object-fit: cover;
    }

    .online-div1 {
        position: absolute;
        top: 86.4%;
        left: 0;
        width: 100%;
        background-color: rgb(245, 245, 245);
        text-align: center;
        border-bottom-left-radius: 7px;
        border-bottom-right-radius: 7px;
        object-fit: cover;
    }
}

.Education1 {
    position: relative;
    width: 14%;
    height: 154.3px;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 7px;
    left: 16.5%;
    margin-top: -12%;
    cursor: pointer;

    .overlay-image {
        position: absolute;
        top: 10%;
        left: 36.5%;
        width: 27%;
        border-radius: 7px;
        object-fit: cover;
    }

    .online-div1 {
        position: absolute;
        top: 86.4%;
        left: 0;
        width: 100%;
        background-color: rgb(245, 245, 245);
        text-align: center;
        border-bottom-left-radius: 7px;
        border-bottom-right-radius: 7px;
        object-fit: cover;
    }
}

.Education2 {
    position: relative;
    width: 14%;
    height: 154.3px;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 7px;
    left: 33%;
    margin-top: -11.9%;
    cursor: pointer;

    .overlay-image {
        position: absolute;
        top: 10%;
        left: 33.5%;
        width: 32.5%;
        border-radius: 7px;
        object-fit: cover;
    }

    .online-div1 {
        position: absolute;
        top: 86.4%;
        left: 0;
        width: 100%;
        background-color: rgb(245, 245, 245);
        text-align: center;
        border-bottom-left-radius: 7px;
        border-bottom-right-radius: 7px;
        border-bottom: 1px solid #ccc;
        object-fit: cover;
    }
}

// 零售
.retail {
    position: relative;
    width: 14%;
    height: 154.3px;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 7px;
    left: 16.5%;
    margin-top: -12%;
    cursor: pointer;

    .overlay-image {
        position: absolute;
        top: 10%;
        left: 34.5%;
        width: 32%;
        border-radius: 7px;
        object-fit: cover;
    }

    .online-div1 {
        position: absolute;
        top: 86.4%;
        left: 0;
        width: 100%;
        background-color: rgb(245, 245, 245);
        text-align: center;
        border-bottom-left-radius: 7px;
        border-bottom-right-radius: 7px;
        object-fit: cover;
    }
}


.stack5 {
    width: 100%;
    height: 47%;
    margin-top: 6%;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 7px;
    cursor: pointer;

    span {
        position: absolute;
        left: 12%;
        top: 71%;
    }
}